<template>
	<view class="wx-toast-box" :animation="animationData">
		<view class="wx-toast-content">
			<view class="wx-toast-icon" v-if="icon != ''">
				<image :src="icon" mode="aspectFit"></image>
			</view>
			<view class="wx-toast-toast">{{ content }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 弹窗显示控制
				animationData: {},
				content: '提示内容',
				icon: ''
			};
		},
		options: {
			multipleSlots: true // 在组件定义时的选项中启用多slot支持
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			/**
			 * 显示toast，定义动画
			 */
			showToast(val, icon) {
				var animation = uni.createAnimation({
					duration: 300,
					timingFunction: 'ease'
				});
				this.animation = animation;
				animation.opacity(1).step();

				this.animationData = animation.export();
				this.content = val;
				this.icon = icon ? icon : ''
				/**
				 * 延时消失
				 */
				setTimeout(
					function() {
						animation.opacity(0).step();
						this.animationData = animation.export()
					}.bind(this),
					1500
				);
			}
		},
		created: function() {}
	};
</script>
<style>
	@import './toast.css';
</style>